<!DOCTYPE html>
<html height100 xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org" lang="zh">
<head>
    <meta th:replace="authority/dynamic/common/edit/head"/>
    <style>
        .row-template-item {
            position: relative;
        }

        .row-template-item-remove {
            position: absolute;
            right: -10px;
            top: 0;
            z-index: 999;
            font-size: 30px !important;
            display: none;
        }

        .row-template-item:hover .row-template-item-remove {
            display: block;
        }
    </style>
</head>

<body class="childrenBody exclude-table-style" padding10>
<form class="layui-form layui-form-pane" lay-filter="form-dynamic-table" onsubmit="return false;">
    <!--/*@thymesVar id="id" type="java.lang.String"*/-->
    <input type="hidden" name="id" th:value="${id}">
    <div class="layui-form-item">
        <label for="T_title" class="layui-form-label"><span class="x-red">*</span>标题</label>
        <div class="layui-input-block">
            <input type="text" class="layui-input" id="T_title" name="title" lay-verify="required"
                   placeholder="标题" autocomplete="off">
        </div>
        <div class="my-notes">
            <div class="layui-elip layui-text content">
                用于导出或者提示
            </div>
        </div>
    </div>
    <div class="layui-form-item">
        <label for="T_title" class="layui-form-label"><span class="x-red">*</span>DML 语句</label>
        <div class="layui-input-block">
            <input type="text" class="layui-input" name="dmlId" lay-verify="required" placeholder="选择 DML 语句"
                   autocomplete="off" id="T_dmlId" readonly>
        </div>
        <div class="my-notes">
            <div class="layui-elip layui-text content">
                数据源语句，查询的dml语句
            </div>
        </div>
    </div>
    <div class="layui-row layui-col-space15 layui-form-item">
        <div class="layui-col-sm6">
            <label for="T_toolbar" class="layui-form-label">工具栏</label>
            <div class="layui-input-block">
                <input type="text" id="T_toolbar" name="toolbar" autocomplete="off" class="layui-input"
                       placeholder="#sys_toolbarDemo">
            </div>
            <div class="my-notes">
                <div class="layui-elip layui-text content">
                    #toolbarDemo: 指向自定义工具栏模板选择器<br>
                    &lt;div&gt;xxx&lt;/div&gt; : 直接传入工具栏模板字符<br>
                    true : 仅开启工具栏，不显示左侧模板<br>
                    default : 让工具栏左侧显示默认的内置模板
                </div>
            </div>
        </div>
        <div class="layui-col-sm6">
            <label for="B_defaultToolbar" class="layui-form-label">工具栏右侧</label>
            <div class="layui-input-block">
                <input type="text" id="B_defaultToolbar" name="defaultToolbar" autocomplete="off"
                       class="layui-input" placeholder='["filter", "print", "exports"]'>
            </div>
            <div class="my-notes">
                <div class="layui-elip layui-text content">
                    filter: 显示筛选图标 exports: 显示导出图标 print: 显示打印图标
                </div>
            </div>
        </div>
    </div>
    <div class="layui-row layui-col-space15 layui-form-item">
        <div class="layui-col-sm4">
            <label for="T_width" class="layui-form-label">宽度</label>
            <div class="layui-input-block">
                <input type="number" id="T_width" name="width" autocomplete="off" class="layui-input"
                       placeholder="默认铺满">
            </div>
        </div>
        <div class="layui-col-sm4">
            <label for="B_height" class="layui-form-label">高度</label>
            <div class="layui-input-block">
                <input type="text" id="B_height" name="height" autocomplete="off" class="layui-input"
                       placeholder="默认随数据列表而适应">
            </div>
            <div class="my-notes">
                <div class="layui-elip layui-text content">
                    不填写/固定值/full-差值(总页面高度-差值)
                </div>
            </div>
        </div>
        <div class="layui-col-sm4">
            <label for="B_cellMinWidth" class="layui-form-label">列最小宽度</label>
            <div class="layui-input-block">
                <input type="number" id="B_cellMinWidth" name="cellMinWidth" autocomplete="off" class="layui-input"
                       placeholder="60">
            </div>
            <div class="my-notes">
                <div class="layui-elip layui-text content">
                    全局定义所有常规单元格的最小宽度（默认：60）
                </div>
            </div>
        </div>
    </div>
    <div class="layui-row layui-col-space15 layui-form-item">
        <div class="layui-col-sm4">
            <label for="T_page" class="layui-form-label">分页</label>
            <div class="layui-input-block">
                <select name="page" id="T_page" lay-verify="">
                    <option value="false">关闭</option>
                    <option value="true" selected>开启</option>
                </select>
            </div>
        </div>
        <div class="layui-col-sm3">
            <label for="B_limit" class="layui-form-label">每页条数</label>
            <div class="layui-input-block">
                <input type="number" id="B_limit" name="limit" autocomplete="off" class="layui-input"
                       placeholder="10">
            </div>
        </div>
        <div class="layui-col-sm5">
            <label for="B_limits" class="layui-form-label">条数选择项</label>
            <div class="layui-input-block">
                <input type="text" id="B_limits" name="limits" autocomplete="off" class="layui-input"
                       placeholder="[10,20,30,40]">
            </div>
        </div>
    </div>
    <div class="layui-row layui-col-space15 layui-form-item">
        <div class="layui-col-sm4">
            <label for="T_autoSort" class="layui-form-label">服务器排序</label>
            <div class="layui-input-block">
                <select name="autoSort" id="T_autoSort" lay-verify="">
                    <option value="true">关闭</option>
                    <option value="false" selected>开启</option>
                </select>
            </div>
        </div>
        <div class="layui-col-sm4">
            <label for="T_totalRow" class="layui-form-label">合计行</label>
            <div class="layui-input-block">
                <select name="totalRow" id="T_totalRow" lay-verify="">
                    <option value="false" selected>关闭</option>
                    <option value="true">开启</option>
                </select>
            </div>
        </div>
    </div>
    <div class="layui-row layui-col-space15 layui-form-item">
        <div class="layui-col-sm4">
            <label for="T_skin" class="layui-form-label">外观</label>
            <div class="layui-input-block">
                <input type="text" id="T_skin" name="skin" autocomplete="off" class="layui-input" placeholder="">
            </div>
            <div class="my-notes">
                <div class="layui-elip layui-text content">
                    line （行边框风格） row （列边框风格） nob （无边框风格）
                </div>
            </div>
        </div>
        <div class="layui-col-sm3">
            <label for="B_even" class="layui-form-label">隔行背景</label>
            <div class="layui-input-block">
                <select name="even" id="B_even" lay-verify="">
                    <option value="false" selected>关闭</option>
                    <option value="true">开启</option>
                </select>
            </div>
        </div>
        <div class="layui-col-sm5">
            <label for="B_disSize" class="layui-form-label">表格尺寸</label>
            <div class="layui-input-block">
                <select name="disSize" id="B_disSize" lay-verify="">
                    <option value="null" selected>默认</option>
                    <option value="sm">小尺寸</option>
                    <option value="lg">大尺寸</option>
                </select>
            </div>
            <div class="my-notes">
                <div class="layui-elip layui-text content">
                    sm （小尺寸） lg （大尺寸）
                </div>
            </div>
        </div>
    </div>
    <div class="layui-row layui-form-item" pane>
        <label for="C_state" class="layui-form-label"><span class="x-red">*</span>状态</label>
        <div class="layui-input-block">
            <input type="checkbox" name="state" id="C_state" lay-skin="switch" checked lay-text="正常|无效">
        </div>
    </div>
    <div class="layui-form-item layui-form-text">
        <label for="T_done" class="layui-form-label">渲染回调
            <small>&nbsp; function(res, curr, count) res：接口数据；curr：当前页面；count：数据总和</small>
        </label>
        <div class="layui-input-block">
            <pre style="height: 100px;width: 100%" id="T_done"></pre>
        </div>
    </div>

    <div class="layui-collapse" id="div_search">
        <div class="layui-colla-item">
            <h2 class="layui-colla-title">搜索配置
                <small>( 搜索框配置，一般不需要配置)</small>
            </h2>
            <div class="layui-colla-content">
                <div class="layui-row layui-col-space15 layui-form-item">
                    <div class="layui-col-sm3">
                        <label for="S_isDynamic" class="layui-form-label">动态搜索</label>
                        <div class="layui-input-block">
                            <select name="isDynamic" id="S_isDynamic" lay-verify="">
                                <option value="false">否</option>
                                <option value="true">是</option>
                            </select>
                        </div>
                    </div>
                    <div class="layui-col-sm3">
                        <label for="S_simplify" class="layui-form-label">简化的</label>
                        <div class="layui-input-block">
                            <select name="simplify" id="S_simplify" lay-verify="">
                                <option value="true">是</option>
                                <option value="false">否</option>
                            </select>
                        </div>
                    </div>
                    <div class="layui-col-sm3">
                        <label for="S_width" class="layui-form-label">弹窗宽度</label>
                        <div class="layui-input-block">
                            <input type="text" id="S_width" name="search.width" autocomplete="off"
                                   class="layui-input" placeholder='500' lay-verify="mValidate">
                        </div>
                    </div>
                    <div class="layui-col-sm3">
                        <label for="S_height" class="layui-form-label">弹窗高度</label>
                        <div class="layui-input-block">
                            <input type="text" id="S_height" name="search.height" autocomplete="off"
                                   class="layui-input" placeholder='300' lay-verify="mValidate">
                        </div>
                    </div>
                </div>
                <div class="layui-form-item layui-form-text">
                    <label for="T_returnFormat" class="layui-form-label">返回格式
                        <small>&nbsp; 默认 {fieldName: 'field',formulaName: 'formula',valueName: 'value',dataTypeName:
                            'type'}
                        </small>
                    </label>
                    <div class="layui-input-block">
                        <pre style="height: 100px;width: 100%" id="T_returnFormat"></pre>
                    </div>
                </div>
                <div class="layui-form-item layui-form-text">
                    <label for="T_done" class="layui-form-label">搜索回调
                        <small>&nbsp; function(table, data) table：当前表格实例；data：搜索框数据</small>
                    </label>
                    <div class="layui-input-block">
                        <pre style="height: 100px;width: 100%" id="T_search"></pre>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="layui-form-item layui-form-text">
    </div>
    <div class="layui-collapse">
        <div class="layui-colla-item">
            <h2 class="layui-colla-title">高级配置
                <small></small>
            </h2>
            <div class="layui-colla-content">
                <fieldset class="layui-elem-field" style="min-width: 100%;min-width: inherit;">
                    <legend>表格行工具模板信息</legend>
                    <div class="layui-field-box">
                        <div class="row-template-container"></div>
                        <div>
                            <button class="layui-btn layui-btn-primary layui-btn-sm layui-btn-fluid row-template-add"><i
                                    class="layui-icon">&#xe608;</i>添加模板
                            </button>
                        </div>
                    </div>
                </fieldset>
            </div>
        </div>
    </div>
    <div class="layui-row layui-form-item">
    </div>
    <div class="layui-form-item">
        <button class="layui-btn" style="float: right" id="my-submit" lay-filter="submit" lay-submit>保存信息</button>
    </div>
</form>
<script type="text/html" id="table-row-template">
    <div class="row-template-item">
        <input type="hidden">
        <i class="layui-icon row-template-item-remove">&#x1007;</i>
        <div class="layui-form-item">
            <label for="S_isDynamic" class="layui-form-label"><span class="x-red">*</span>模板名</label>
            <div class="layui-input-block">
                <input type="text" autocomplete="off" class="layui-input" placeholder='' lay-verify="required">
            </div>
        </div>
        <div class="layui-form-item layui-form-text">
            <label for="T_done" class="layui-form-label"><span class="x-red">*</span>模板内容
                <small>&nbsp; 设置一个或多个按钮（a/button标签），lay-event 属性必须设置，且不重复</small>
            </label>
            <div class="layui-input-block">
                <pre style="height: 100px;width: 100%"></pre>
            </div>
        </div>
        <div class="layui-form-item layui-form-text">
            <label for="T_done" class="layui-form-label">点击事件
                <small>&nbsp; function(layEvent, table, data) layEvent：当前点击的lay-event,
                    table：当前表格实例；data：搜索框数据 (另提供lutil工具类)
                </small>
            </label>
            <div class="layui-input-block">
                <pre style="height: 100px;width: 100%"></pre>
            </div>
        </div>
        <hr>
    </div>
</script>
<script th:replace="authority/dynamic/common/edit/footer"></script>

<script>
    var editor_done = createAce("T_done", "ace/mode/sql");
    var editor_returnFormat = createAce("T_returnFormat", "ace/mode/json");
    var editor_search = createAce("T_search", "ace/mode/sql");

    layui.use(['form', 'lutil', 'tableSelect', 'element'], function () {
        var form = layui.form,
            lutil = layui.lutil,
            element = layui.element,
            tableSelect = layui.tableSelect;
        var TABLE_ROW_TEMPLATE_HTML = $('#table-row-template').html(), ROW_TEMPLATE_ACE = [];
        tableSelect.render({
            elem: '#T_dmlId',	//定义输入框input对象 必填
            checkedKey: 'id', //表格的唯一建值，非常重要，影响到选中状态 必填
            searchKey: 'name',	//搜索输入框的name值 默认keyword
            searchPlaceholder: '模糊搜索 DML名',	//搜索输入框的提示文字 默认关键词搜索
            searchCallback: function (table, data) {
                var searchs = [];
                $.each(data.field, function (i, e) {
                    searchs.push({field: i, formula: '<->', value: e});
                });
                table.query({searchs: JSON.stringify(searchs)});
            },
            table: {	//定义表格参数，与LAYUI的TABLE模块一致，只是无需再定义表格elem
                url: content_path + 'authority/plat/dml/paging_query.do',
                where: {dmlId: 'CDAE93B88FB2464DB7910E3D857BB27F', selectType: 2},
                headers: {'[[${_csrf.headerName}]]': '[[${_csrf.token}]]'},
                cols: [
                    [
                        {type: 'radio'},
                        {field: 'id', title: 'ID'},
                        {field: 'name', title: 'DML名'},
                        {field: 'modifyUserName', title: '最后修改人'}
                    ]
                ]
            },
            done: function (elem, data) {
                //选择完后的回调，包含2个返回值 elem:返回之前input对象；data:表格返回的选中的数据 []
                //拿到data[]后 就按照业务需求做想做的事情啦~比如加个隐藏域放ID...
                var NEW_JSON = [];
                layui.each(data.data, function (index, item) {
                    NEW_JSON.push(item.name + " （" + item.id + "）");
                });
                elem.val(NEW_JSON.join(","));
            }
        });

        $('.row-template-add').click(function (e) {
            var $template = $(TABLE_ROW_TEMPLATE_HTML), preElem = $template.find('pre'), random = new Date().getTime();
            $template.data('zsa-random', random), preElem.eq(0).attr("id", "T_content" + random), preElem.eq(1).attr("id", "T_event" + random);
            $('.row-template-container').append($template);
            ROW_TEMPLATE_ACE.push({
                random: random,
                content: createAce("T_content" + random, 'ace/mode/html'),
                event: createAce("T_event" + random, 'ace/mode/javascript')
            })
        });
        $('.row-template-container').on('click', '.row-template-item-remove', function (e) {
            var templateItem = $(this).closest('.row-template-item');
            var random = templateItem.data('zsa-random');
            $.each(ROW_TEMPLATE_ACE, function (i, e) {
                if (e === undefined) return false;
                if (e['random'] === random) delete e;
            });
            templateItem.remove();
        });

        form.on('submit(submit)', function (formData) {
            var done = editor_done.getValue(), toolbarData = [], validate = true;
            $('.row-template-container .row-template-item').each(function () {
                var random = $(this).data('zsa-random'), content, event;
                $.each(ROW_TEMPLATE_ACE, function (i, e) {
                    if (e === undefined) return false;
                    if (e['random'] === random)
                        return content = e['content'].getValue(), event = e['event'].getValue(), true;

                });
                if (content === undefined || content === '') return validate = '请设置模板内容', false;
                toolbarData.push({
                    id: $(this).find('input').eq(0).val(),
                    name: $(this).find('.layui-form-item input').val(),
                    content: content,
                    event: event
                });
            });
            if (validate !== true) return lutil.error_alert(validate), false;
            var loading = layer.load(2, {shade: [0.3, '#eee']});
            ajaxRequestByCsrf(content_path + 'authority/dynamic_table/save.do', $.extend(formData.field, {
                done: done,
                toolbarData: JSON.stringify(toolbarData),
                state: formData.field['state'] ? 1 : 0,
                dmlId: $(formData.form).find('input[name=dmlId]').attr('ts-selected')
            }), function (res) {
                lutil.success_msg(res.message);
                var index = window.name && parent.layer.getFrameIndex(window.name); //先得到当前iframe层的索引
                parent.layer.close(index);
            }, null, function (res) {
                layer.close(loading);
            });
            return false;
        });

        if ("[[${id}]]" !== '') {
            var loading = layer.load(2, {shade: [0.3, '#eee']});
            ajaxRequestByCsrf(content_path + 'authority/dynamic_table/detail/[[${id}]].do', {}, function (res) {
                form.val("form-dynamic-table", $.extend(res.data, {state: res.data['state'] === 1}));
                editor_done.setValue(res.data['done'] || '');
                $('form input[name=dmlId]').val(res.data['dmlName'] + '（' + res.data['dmlId'] + '）').attr('ts-selected', res.data['dmlId']);
                $.each(res.data['toolbarData'], function (i, e) {
                    if (e === undefined) return false;
                    $('.row-template-add').click();
                    var itemElem = $('.row-template-container .row-template-item').last(),
                        random = itemElem.data('zsa-random');
                    itemElem.find('input').eq(0).val(e['id']), itemElem.find('.layui-form-item input').val(e['name']);
                    $.each(ROW_TEMPLATE_ACE, function (i1, e1) {
                        if (e1 === undefined) return false;
                        if (e1['random'] === random)
                            return e1['content'].setValue(e['content'] || ''), e1['event'].setValue(e['event'] || ''), true;
                    });
                });
            }, null, function (res) {
                layer.close(loading);
            });
        }
    })
</script>
</body>
</html>